<!DOCTYPE HTML>

<html>

<head>
  <title>starrating editor examples</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <!-- Enable responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" id="theme-link" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">

  <!-- fontawesome5 -->
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>

  <!-- JSON-Editor -->
  <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>

  <style type="text/css">
  body {
    margin: 1em;
  }

  .starrating {
    direction: rtl;
    display: inline-block;
    white-space:nowrap;
  }
  .starrating > input {
    display: none;
  }  /* Remove radio buttons */
  .starrating > label:before {
    content: '\2606'; /* Empty Star */
    margin: 1px;
    font-size: 18px;
    font-style:normal;
    font-weight:400;
    line-height:1;
    font-family: 'Arial';
    display: inline-block;
  }
  .starrating > label {
    color: #888; /* Start color when not clicked */
    cursor: pointer;
    margin: 0;
    margin: 8px 0 2px 0;
  }
  .starrating > label.starrating-display-enabled {
    margin: 1px 0 0 0;
  }
  .starrating > input:checked ~ label,
  .starrating:not(.readonly) > input:hover ~ label {
    color: #ffca08; /* Set yellow color when star checked/hover */
  }
  .starrating > input:checked ~ label:before,
  .starrating:not(.readonly) > input:hover ~ label:before {
    content: '\2605'; /* Filled Star when star checked/hover */
    text-shadow: 0 0 1px rgba(0,20,20,1);
  }
  .starrating .starrating-display {
    position: relative;
    direction: ltr;
    text-align: center;
    font-size: 10px;
    line-height: 0px;
  }

  </style>
</head>

<body>
  <h2>String based Starrating editor</h2>
  <p><ul>
    <li>If "displayValue" is set to true, the seleced option will be displayed below the stars.</li>
  </ul></p>
  <div id="form"></div>
  <script type="text/javascript">

  var options = {
    "theme": "bootstrap5",
    "template": "handlebars",
    "iconlib": "fontawesome5",
    "schema": {
      "title": "starrating editor examples",
      "id": "test",
      "type": "object",
      "format": "grid",
      "properties": {
        starrating: {
          type: "string",
          format: "starrating",
          title: "Starrating",
          description: 'Starrating',
          enum: ["Beginner", "Skilled", "Experienced", "Advanced", "Expert"],
          options: {
            grid_columns: 2
          }
        },
        starrating2: {
          type: "string",
          format: "starrating",
          title: "Starrating",
          description: 'Starrating with "displayValue=true"',
          enum: ["Beginner", "Skilled", "Experienced", "Advanced", "Expert"],
          options: {
            grid_columns: 2,
            displayValue: true
          }
        },
        starrating3: {
          type: "string",
          format: "starrating",
          title: "Starrating",
          description: 'Starrating with "displayValue=true"',
          default: "5 Stars",
          enum: ["1 Star", "2 Stars", "3 Stars", "4 Stars", "5 Stars", "6 Stars", "7 Stars", "8 Stars", "9 Stars", "10 Stars"],
          options: {
            grid_columns: 4,
            displayValue: true
          }
        }
      }
    }
  }

  var element = document.getElementById('form');
  var editor = new JSONEditor(element, options);

  </script>
</body>

</html>